<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="添加模板" :visible.sync="dialogVisible" @close="resetForm('addAdverModelForm')" width="400px">
        <el-form label-position="top" :model="addAdverModelForm" :hide-required-asterisk='true' ref="addAdverModelForm" :rules="addAdverModelRules" class="dialog_form">
            <el-form-item label="模板名称" prop="name">
                <el-input v-model="addAdverModelForm.name" placeholder="请输入模板名称"></el-input>
            </el-form-item>
            <el-form-item label="选择广告账户" prop="advertiser">
                <template slot="label">
                    <div class="flexbox flexcenter flexbetween" style="width:360px">
                        <span>选择广告账户</span>
                        <el-input v-model="queryInfo.word" clearable style="width:180px" size="mini" prefix-icon="el-icon-search" placeholder="广告主ID" @change="changeGroup"></el-input>
                    </div>
                </template>
                <div class="group_box" v-infinite-scroll="load" :infinite-scroll-disabled="isload">
                    <el-checkbox-group v-model="addAdverModelForm.advertiser">
                        <el-checkbox :label="item.advertiser_id"  v-for="(item,index) in userList" :key="index">{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </div>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm('addAdverModelForm')" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm('addAdverModelForm')" :loading="loading" :disabled="loading" class="el-button-width">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            isload: false,
            userList:[],
            addAdverModelForm: {
                name: "",
                advertiser:[]
            },
            queryInfo:{
                page:1,
                limit:20,
                word:'',
            },
            total:0,
            addAdverModelRules: {
                name: [
                    {
                        required: true,
                        message: "请输入模板名称",
                        trigger: ["blur","change"],
                    },
                ],
                advertiser: [
                    {
                        required: true,
                        message: "选择广告账户",
                        trigger: ["blur","change"],
                    },
                ],
            },
        };
    },
    created() {
        this.$bus.on("addAdverModel", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.getUserList()
        });
    },
    beforeDestroy() {
        this.$bus.off("addAdverModel");
    },
    methods: {

        //获取账户列表列表
        async getUserList() {
            this.isload = true;
            const { data: res } = await this.$http.post(
                "videotest/Livetesting/get_adlist",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.isload = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.isload = false;
                this.total = res.data.count;
                if (this.queryInfo.page == 1) {
                    this.userList = res.data.list;
                } else {
                    this.userList = this.userList.concat(res.data.list);
                }
            }
        },

        // 下拉加载更多
        load() {
            if (this.userList.length == this.total) {
                this.isload = true;
                this.queryInfo.page = 1;
            } else {
                this.queryInfo.page += 1;
                this.getUserList();
            }
        },

        // 筛选
        changeGroup(){
            this.queryInfo.page = 1;
            this.getUserList();
        },


        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "videotest/Livetesting/admodel_add",
                        this.addAdverModelForm
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.$message({
                            message: "添加成功",
                            type: "success",
                        });
                        this.loading = false;
                        this.resetForm(formName);
                        this.$parent.getModelList();
                    }
                } else {
                    this.loading = false;
                    return false;
                }
            });
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.queryInfo.page = 1
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.time_type_item {
    width: 174px;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
    color: #17233d;
}
.time_type_item.active {
    color: #4475ff;
    border-color: #4475ff;
    background-color: rgba(68, 117, 255, 0.05);
}
.time_type_text {
    margin-left: 10px;
}
.el-checkbox{
    display: block;
    margin-right: 0;
}
.group_box{
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}
</style>
